<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="20" class="tl">
            <div class="homeLogo fl">
              <img src="@/assets/image/home/logo.png" alt="">
            </div>
            {{this.schoolName}}
          </el-col>
          <el-col :span="4" class="tr">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                您好，{{this.user}}（{{this.role_name}}）<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="modify" icon="el-icon-key">修改密码</el-dropdown-item>
                <el-dropdown-item command="exit" icon="el-icon-switch-button">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="16vw">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu :default-active="this.menu" router unique-opened class="el-menu-vertical-demo" align="center" background-color="#49abf8" text-color="#fff" active-text-color="#fad473" @select="handleOpen">
                <template v-for="item in this.menuList">
                  <el-submenu v-if="item.childrenList" :index="item.id" :key="item.id" class="iconTitle">
                    <template slot="title">
                      <div :class="item.icon"></div>
                      <span>{{item.name}}</span>
                    </template>
                    <el-menu-item-group v-for="(item1, index1) in item.childrenList" :key="index1">
                      <el-menu-item :index="item1.id">{{item1.name}}</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-menu-item v-else :index="item.id" :key="item.id" class="iconTitle">
                    <div :class="item.icon"></div>
                    <span slot="title">{{item.name}}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" width="30%" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
      <el-form :model="form" label-width="80px">
         <el-form-item label="旧密码" prop="original_password">
          <el-input type="password" v-model="form.original_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input type="password" v-model="form.new_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="new_password">
          <el-input type="password" v-model="form.new_password2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkFn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {APICHANGEPASSWORD, APIGETMENU} from '@/common/api.js'
export default {
  data () {
    return {
      schoolName: '',
      user: '',
      menu: '',
      name: '',
      role_name: '',
      menuList: [],
      dialogFormVisible: false,
      form: {
        original_password: '',
        new_password: '',
        new_password2: ''
      }
    }
  },
  created () {
    if (!this.$cookies.get('menu')) {
      this.menu = 'index'
    } else {
      this.menu = this.$cookies.get('menu')
    }
    this.schoolName = sessionStorage.getItem('title')
    this.user = sessionStorage.getItem('user')
    this.role_name = sessionStorage.getItem('role_name')
    this.getMenu()
  },
  methods: {
    getMenu () {
      APIGETMENU().then((res) => {
        if (res.status === 1) {
          sessionStorage.setItem('list', res.data)
          if (res.data.includes('index')) {
            var menu1 = { id: '/index', name: '平台首页', icon: 'icon icon1' }
            this.menuList.push(menu1)
          }
          if (res.data.includes('student')) {
            var menu2 = { id: '/students', name: '学生管理', icon: 'icon icon2', childrenList: [] }
            if (res.data.includes('studentInformation')) {
              var menu2C1 = { id: '/studentInformation', name: '学生信息' }
              menu2.childrenList.push(menu2C1)
            }
            if (res.data.includes('survey')) {
              var menu2C2 = { id: '/measurementScale', name: '测评量表' }
              menu2.childrenList.push(menu2C2)
            }
            if (res.data.includes('plan')) {
              var menu2C3 = { id: '/measurementPlan', name: '测评计划' }
              menu2.childrenList.push(menu2C3)
            }
            if (res.data.includes('reportShow')) {
              var menu2C4 = { id: '/checkReport', name: '查看报告' }
              menu2.childrenList.push(menu2C4)
            }
            if (res.data.includes('warning')) {
              var menu2C6 = { id: '/warning', name: '预警管理' }
              menu2.childrenList.push(menu2C6)
            }
            if (res.data.includes('crisisList')) {
              var menu2C5 = { id: '/crisis', name: '危机管理' }
              menu2.childrenList.push(menu2C5)
            }
            this.menuList.push(menu2)
          }
          if (res.data.includes('resourceSpace')) {
            var menu4 = { id: '/resourceSpace', name: '资源空间', icon: 'icon icon5', childrenList: [] }
            if (res.data.includes('mentalHealthSurvey')) {
              var menu4C1 = { id: '/resourceSpace/1', name: '全国普查' }
              menu4.childrenList.push(menu4C1)
            }
            if (res.data.includes('teachersLearning')) {
              var menu4C2 = { id: '/resourceSpace/2', name: '教师学习园地' }
              menu4.childrenList.push(menu4C2)
            }
            if (res.data.includes('mentalHealthWork')) {
              var menu4C3 = { id: '/resourceSpace/3', name: '心理健康工作' }
              menu4.childrenList.push(menu4C3)
            }
            this.menuList.push(menu4)
          }
          if (res.data.includes('permission')) {
            var menu3 = { id: '/personnelAccess', name: '人员权限', icon: 'icon icon3' }
            this.menuList.push(menu3)
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCommand (command) {
      if (command === 'modify') {
        this.form = {}
        this.dialogFormVisible = true
      } else if (command === 'exit') {
        this.$cookies.set('menu', '')
        sessionStorage.setItem('user', '')
        sessionStorage.setItem('token', '')
        sessionStorage.setItem('title', '')
        this.$router.push({path: '/'})
      }
    },
    handleOpen (key, keyPath) {
      this.$cookies.set('menu', key)
    },
    checkFn () { // 修改密码
      if (this.form.original_password === '') {
        this.$message.warning('旧密码不能为空')
        return false
      }
      if (this.form.new_password === '') {
        this.$message.warning('新密码不能为空')
        return false
      }
      if (this.form.new_password2 === '') {
        this.$message.warning('确定密码不能为空')
        return false
      }
      if (this.form.new_password2 !== this.form.new_password) {
        this.$message.warning('两次密码输入不匹配，请重新输入')
        return false
      }
      this.changePassword()
    },
    changePassword () {
      APICHANGEPASSWORD({
        original_password: this.form.original_password,
        new_password: this.form.new_password
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.el-header {
  height: 6vh !important;
  line-height: 6vh;
  color: $mainFontColor;
  font-size: $centerSize !important;
}
.el-aside {
  height: 94vh;
  background-color: $mainColor;
  color: #ffffff;
}
.el-main{
  padding: 0px;
  border-right:1px solid #49abf8;
  background-color: #DAEDFF;
}
.homeLogo{
  width: 34px;
  height: 6vh;
  line-height: 6vh;
  padding-top: 1vh;
  box-sizing: border-box;
  img{
    width: 100%;
    height: auto;
  }
}
.el-dropdown{
  height: 4vh;
}
.iconTitle{
  position: relative;
  .icon{
    position: absolute;
    left: 3.5vw;
    background: url(./../../assets/image/home/home.png) no-repeat;
  }
  .icon1{
    width: 38px;
    height: 38px;
    background-position: 0px -1px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon2{
    width: 44px;
    height: 38px;
    background-position: -4px -146px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon3{
    width: 40px;
    height: 38px;
    background-position: -6px -298px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon4{
    width: 40px;
    height: 40px;
    background-position: -6px -448px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon5{
    width: 36px;
    height: 36px;
    background-position: -8px -600px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon6{
    width: 43px;
    height: 43px;
    background-position: -4px -747px;
    transform: scale(0.5);
    top: 10px;
  }
  .icon7{
    width: 42px;
    height: 42px;
    background-position: -6px -898px;
    transform: scale(0.5);
    top: 10px;
  }
}
</style>
<style lang="scss">
@import 'src/assets/style/varibles.scss';
.el-submenu__title i{
  color: #ffffff !important;
}
//下拉
.el-select{
  width: 100%;
}
.el-cascader{
  width: 100%;
}
.el-date-editor{
  width: 100% !important;
}
//tab
.tabBox>.el-tabs--card>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll{
  background-color: #ffffff;
  border-top: 1px solid #F6F6F6;
}
.tabBox>.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: none !important;
}
.tabBox>.el-tabs--card>.el-tabs__header .el-tabs__item{
  border-left: none !important;
}
.tabBox>.el-tabs--card>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item{
  padding: 0 30px !important;
  border-top: 2px solid #ffffff;
}
.tabBox>.el-tabs--card>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.is-active{
  background:rgba(233,245,255,1);
  border-top: 2px solid #409EFF;
}
.tabBox>.el-tabs--card>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item{
  border-bottom:none !important;
}
//内容
.center{
  width: 82vw;
  height: 86vh;
  background-color: #ffffff;
  margin: 0 1vw 1vh;
  box-sizing: border-box;
  padding: 2vh 2vw;
  box-sizing: border-box;
  overflow-y: auto;
}
.center2{
  width: 82vw;
  height: 90vh;
  background-color: #ffffff;
  margin: 2vh 1vw 1vh;
  box-sizing: border-box;
  padding: 2vh 2vw;
  box-sizing: border-box;
  overflow-y: auto;
}
.centerTitle{
  height: 36px;
  line-height: 36px;
  font-weight: 700;
  color: $mainFontColor;
  font-size: $secondarySize;
}
.centerTitle2{
  height: 36px;
  line-height: 36px;
  font-weight: 700;
  color: $mainFontColor;
  font-size: $centerSize;
}
.centerTable{
  margin: 1vh 0;
}
//带返回的title
.returnTitle{
  height: 41px;
  background-color: #ffffff;
  margin-bottom: 15px;
  border-top: 1px solid #E4E7ED;
  box-sizing: border-box;
  padding: 0 1vw;
}
.el-page-header{
  height: 41px !important;
  line-height: 41px !important;
}
.el-page-header__left{
  cursor: pointer;
}
.el-page-header__content{
  color: $mainFontColor !important;
}
//表格里的危险按钮
.dangerTextBtn{
  color: $dangerColor;
}
.dangerBtn{
  color: $dangerColor !important;
  border:1px solid $dangerColor !important;
  background-color: #ffffff !important;
}
//弹窗
.el-dialog__body{
  border-top: 1px solid #E1E1E1;
  padding: 20px !important;
}
</style>
